import React, { Component } from "react";
import { connect } from "react-redux";
import { actions } from "./_index";
import Item from "./_item";
class index extends Component {
  constructor(props) {
    super(props);
  }
  reLists() {
    const { firstData } = this.props;
    return firstData.map((val, index) => {
      return <Item key={index} val={val} />;
    });
  }
  render() {
    const { firstData, onAdd } = this.props;
    // console.log(firstData.length);
    return (
      <div>
        {firstData.length !== 0 ? this.reLists() : ""}
        <input
          onClick={() => {
            onAdd("点击事件");
          }}
          type="button"
          value="点击"
        />
      </div>
    );
  }
}
//需要渲染什么数据
//作为函数，mapStateToProps执行后应该返回一个对象
// 获取数据的
function mapStateToProps(state) {
  // console.log(state);
  return {
    firstData: state.first,
  };
  // 冒号之前的是：自定义数据名称；
  // 冒号之后的是：Store.js合并拆分时定义的名字
  // state 相当于最大的store（一个页面只有一个）
  // state = {
  //   first: [],
  //   two: {},
  // };
}
//是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。
// 操作方法的
const mapDispatchToProps = (dispatch, ownProps) => {
  // dispatch({
  //   type: "TODO_ADD",
  //   text: "描述",
  // });
  return {
    onAdd: (text) => dispatch(actions.add(text)),
  };
  // 冒号之前的就是我们定义的事件方法名
  // 同样是挂到Props之上
};

export default connect(mapStateToProps, mapDispatchToProps)(index);
